<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/my.css" />

	</head>

	<body style="background-color: #F4F4F4;">
		<div id="my">
			<header class="mui-bar mui-bar-nav">
				<a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" style="color: #fff;">个人信息</h1>
				<!--<div class="save" @click="saveClick">保存</div>-->
			</header>

			<div class="content">
				<div class="list">
					<div class="item padding-top-bottom5 bottom-underline" @click="headPortrait">
						<div class="item-title">
							<span class="title">头像</span>
							<span class="desc">
								<img :src="empImg"/>
							</span>
						</div>
						<span class="mui-icon mui-icon-arrowright"></span>
					</div>
					<div class="item" @click="modification('name')">
						<div class="item-title bottom-underline">
							<span class="title">姓名</span>
							<span class="desc">{{userDatas.empName}}</span>
							<!--<input type="text" v-model="userDatas.empName" />-->
							<span class="mui-icon mui-icon-arrowright"></span>
						</div>

					</div>
					<div class="item">
						<div class="item-title bottom-underline">
							<span class="title">年龄</span>
							<span class="desc">{{empBirthDate}}</span>
							<!--<input type="number" v-model="empBirthDate" />-->
							<!--<span class="mui-icon mui-icon-arrowright"></span>-->
						</div>
					</div>
					<div class="item" @click="ModificationGender">
						<div class="item-title bottom-underline">
							<span class="title">性别</span>
							<span class="desc">{{userDatas.empSex}}</span>
							<span class="mui-icon mui-icon-arrowright"></span>
						</div>
					</div>
					<div class="item" @click="modification('ipone')">
						<div class="item-title">
							<span class="title">电话</span>
							<span class="desc">{{userDatas.empPhoneNumber}}</span>
							<!--<input type="number" v-model="userDatas.empPhoneNumber" />-->
							<span class="mui-icon mui-icon-arrowright"></span>
						</div>
					</div>

					<div class="item margin-top15">
						<div class="item-title bottom-underline">
							<span class="title">所属物业</span>
							<span class="desc">{{userDatas.orgName}}</span>
						</div>
					</div>
					<div class="item">
						<div class="item-title bottom-underline">
							<span class="title">所属部门</span>
							<span class="desc">{{userDatas.postName}}</span>

						</div>
					</div>
					<div class="item">
						<div class="item-title">
							<span class="title">服务小区</span>
							<span class="desc">{{userDatas.neiName}}</span>

						</div>
					</div>
				</div>
				<div v-show="submit" @click="saveClick" class="save-submit">保存</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false //启用右滑关闭功能
			})
			var my = new Vue({
				el: '#my',
				data: {
					userDatas: {},
					index: 0,
					submit: false
				},
				watch: {
					userDatas: {
						deep: true,
						handler: function(newVal, oloVal) {
							this.index++
								if(this.index > 1) {
									this.submit = true
								}
						}
					}
				},
				computed: {
					empBirthDate: function() {
						if(this.userDatas.empBirthDate) {
							return ages(this.userDatas.empBirthDate)
						}
					},

					empImg: function() {
						if(this.userDatas.filesPrefix && this.userDatas.filesPath) {
							return this.userDatas.filesPrefix + this.userDatas.filesPath
						}
					}

				},
				methods: {
					ModificationGender: function() {
						var that = this
						plus.nativeUI.actionSheet({
							cancel: "取消",
							buttons: [{
									title: "男"
								},
								{
									title: "女"
								},
							]
						}, function(e) {
							if(e.index == 1) {
								that.userDatas.empSex = '男'
							} else if(e.index == 2) {
								that.userDatas.empSex = '女'
							}
						});
					},
					headPortrait: function() { // 选择头像方法
						var that = this
						if(mui.os.plus) {
							var a = [{
								title: "拍照"
							}, {
								title: "从手机相册选择"
							}];
							plus.nativeUI.actionSheet({
								title: "修改头像",
								cancel: "取消",
								buttons: a
							}, function(b) {
								switch(b.index) {
									case 0:
										break;
									case 1:
										that.getImage()
										break;
									case 2:
										that.galleryImg();
										break;
									default:
										break
								}
							})
						}
					},

					saveClick: function() { // 提交按钮 
						UpEmployeeInfo(this.userDatas) // 修改用户信息方法
					},

					getImage: function() { // 拍照
						var c = plus.camera.getCamera();
						c.captureImage(function(e) {
							//存储到本地 
							plus.io.resolveLocalFileSystemURL(e, function(entry) {

								cutImage(entry.toLocalURL())

							}, function(e) {
								console.log("读取拍照文件错误：" + e.message);
							});
						}, function(s) {
							console.log("error" + s);
						}, {
							filename: "_doc/head.jpg"
						})
					},
					galleryImg: function() { // 从相册里选择
						plus.gallery.pick(function(a) {
							plus.io.resolveLocalFileSystemURL(a, function(entry) {　　　　　　 //entry为图片原目录（相册）流 
								cutImage(entry.toLocalURL());
							}, function(e) {
								console.log("读取图片错误：" + e.message);
							});
						}, function(a) {}, {
							filter: "image"
						})
					},
					modification: function(item) {
						var that = this;
						if(item == 'name') {
							plus.nativeUI.prompt("请输入你要修改的名字 ", function(e) {
							  e.index == 0 ? that.userDatas.empName = e.value : ''
							}, "修改姓名",'' , ["确定", "取消"]);
						}else if(item == 'ipone'){
							plus.nativeUI.prompt("请输入你要修改的电话号 ", function(e) {
							  e.index == 0 ? that.userDatas.empPhoneNumber = e.value : ''
							}, "修改电话", '' , ["确定", "取消"]); 
						}
					}
				}
			})

			window.addEventListener('cropper', function(e) { //执行刷新
				GetUserDesc()
			});

			mui.plusReady(function() {
				FastClick.attach(document.body);
				GetUserDesc() // 调用请求用户信息方法
				var list = plus.webview.currentWebview().opener();
				//触发父页面的自定义事件(refresh),从而进行刷新
				mui.fire(list, 'UpEmployeeInfo');
				//返回true,继续页面关闭逻辑
				return true;
			})

			//裁剪图片
			function cutImage(path) {
				mui.openWindow({
					url: 'cropper.html',
					id: 'cropper',
					extras: {
						path: path,
					},
					show: {
						aniShow: 'zoom-fade-in',
						duration: 800
					},
					waiting: {
						autoShow: true
					}
				});
			}

			function GetUserDesc() { // 获取用户信息
				var userID = plus.storage.getItem("userID")
				if(userID) {
					mui.post(httpUrl.testUrl + '/api/Users/GetEmployeeInfo', {
						userID: userID
					}, function(res) {
						if(res.code == 1001) {
							my.userDatas = res.data
						} else {
							mui.toast('资源请求错误！')
						}
					})
				}
			}

			function UpEmployeeInfo(data) {
				mui.post(httpUrl.testUrl + '/api/Users/UpEmployeeInfo', {
					userID: plus.storage.getItem("userID"),
					empName: data.empName,
					empSex: data.empSex,
					empPhoneNumber: data.empPhoneNumber
				}, function(res) {
					if(res.code === 1001) {
						plus.storage.removeItem("filesPath");
						mui.toast('修改成功！')
						setTimeout(function() {
							mui.back()
							var list = plus.webview.currentWebview().opener();
							//触发父页面的自定义事件(refresh),从而进行刷新
							mui.fire(list, 'UpEmployeeInfo');
							//返回true,继续页面关闭逻辑
							return true;
						}, 500)
					}
				})
			}
		</script>
	</body>

</html>